<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Service</title>
    <base href="/">
    <link rel="stylesheet" href="./css/services/style.css">
    <link rel="stylesheet" href="./css/font.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
</head>

<body>
    <div class="nav-wrapper">
        <div class="close">
            <svg t="1709364983593" class="icon" viewBox="0 0 1102 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="4375" width="30" height="30">
                <path
                    d="M701.597538 511.842462l366.119385-366.119385a57.974154 57.974154 0 0 0 0-82.077539l-41.038769-41.038769a57.974154 57.974154 0 0 0-82.077539 0L578.481231 388.726154 212.283077 22.528a57.974154 57.974154 0 0 0-82.077539 0l-41.117538 41.117538a57.974154 57.974154 0 0 0 0 82.077539l366.119385 366.119385-366.119385 366.119384a58.131692 58.131692 0 0 0 0 82.156308l41.038769 41.038769a57.974154 57.974154 0 0 0 82.077539 0l366.119384-366.119385 366.119385 366.119385a57.974154 57.974154 0 0 0 82.077538 0l41.03877-41.038769a58.131692 58.131692 0 0 0 0-82.156308L701.597538 511.842462z"
                    fill="#ffffff" p-id="4376"></path>
            </svg>
        </div>
        <ul class="menu">
            <li class="menu-list" link-value="home">
                Home
            </li>
            <li class="menu-list" link-value="about">
                About
            </li>
            <li class="menu-list" link-value="services">
                Services
            </li>
            <li class="menu-list" link-value="contact">
                Contact
            </li>
        </ul>
    </div>
    <div class="nav">
        <div class="nav-left">
            <h1>FINAL ASSIGNMENT</h1>
            <div class="nav-btn">
                <svg t="1709366180858" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5575" width="30" height="30">
                    <path
                        d="M909.059 245.633H114.941C85.705 245.633 62 221.929 62 192.692c0-29.237 23.705-52.941 52.941-52.941h794.118c29.236 0 52.941 23.705 52.941 52.941 0 29.237-23.705 52.941-52.941 52.941zM644.354 564.948H114.941C85.705 564.948 62 541.243 62 512.007c0-29.237 23.705-52.941 52.941-52.941h529.413c29.236 0 52.94 23.705 52.94 52.941 0 29.236-23.704 52.941-52.94 52.941zM803.177 884.249H114.941c-29.236 0-52.941-23.704-52.941-52.94 0-29.237 23.705-52.941 52.941-52.941h688.236c29.236 0 52.94 23.704 52.94 52.941 0 29.236-23.704 52.94-52.94 52.94z"
                        fill="#333333" p-id="5576"></path>
                </svg>
            </div>
        </div>
        <button class="raven-button">
            <span>Get an appointment</span>
        </button>
    </div>
    <div class="elementor-1">
        <div class="elementor-1-container">
            <h1 class="elementor-1-title">
                THE FIRST HEADLINE IS HERE
            </h1>
            <div class="elementor-1-img">
                <img src="../asset/img/img3.png" alt="">
            </div>
        </div>
    </div>
    <div class="elementor-7 elementor-title">
        <div class="elementor-container">
            <h4 class="elementor-heading-title">This is a subheading</h4>
            <div class="elementor-widget-container">
                <h2 class="elementor-size-default">A Headline</h2>
            </div>
        </div>
    </div>
    <div class="elementor-8">
        <div class="elementor-8-container">
            <div class="elementor-list-wrapper">
                <ul class="list">
                    <li class="list-item">
                        <h5>Tabulation</h5>
                        <span class="title">Other</span>
                    </li>
                    <li class="list-item">
                        <h5>Tabulation</h5>
                        <span class="title">Other</span>
                    </li>
                    <li class="list-item">
                        <h5>Tabulation</h5>
                        <span class="title">Other</span>
                    </li>
                    <li class="list-item">
                        <h5>Tabulation</h5>
                        <span class="title">Other</span>
                    </li>
                </ul>
            </div>
            <div class="elementor-list-wrapper">
                <ul class="list">
                    <li class="list-item">
                        <h5>Tabulation</h5>
                        <span class="title">Other</span>
                    </li>
                    <li class="list-item">
                        <h5>Tabulation</h5>
                        <span class="title">Other</span>
                    </li>
                    <li class="list-item">
                        <h5>Tabulation</h5>
                        <span class="title">Other</span>
                    </li>
                    <li class="list-item">
                        <h5>Tabulation</h5>
                        <span class="title">Other</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="elementor-9 elementor-title">
        <div class="elementor-container">
            <h4 class="elementor-heading-title">This is a subheading</h4>
            <div class="elementor-widget-container">
                <h2 class="elementor-size-default">A Headline</h2>
            </div>
        </div>
    </div>
    <div class="elementor-10">
        <div class="elementor-10-container">
            <div class="elementor-card">
                <img src="./asset/img/show-4.jpg"
                    alt="">
                <div class="card-info">
                    <h5 class="info-name">CARD NAME</h5>
                    <div class="position">Styler</div>
                </div>
            </div>
            <div class="elementor-card">
                <img src="./asset/img/show-1.jpg"
                    alt="">
                <div class="card-info">
                    <h5 class="info-name">CARD NAME</h5>
                    <div class="position">Styler</div>
                </div>
            </div>
            <div class="elementor-card">
                <img src="./asset/img/show-8.jpg"
                    alt="">
                <div class="card-info">
                    <h5 class="info-name">CARD NAME</h5>
                    <div class="position">Styler</div>
                </div>
            </div>
            <div class="elementor-card">
                <img src="./asset/img/show-2.jpg"
                    alt="">
                <div class="card-info">
                    <h5 class="info-name">CARD NAME</h5>
                    <div class="position">Styler</div>
                </div>
            </div>
        </div>
    </div>
    <div class="elementor-11">
        <div class="elementor-11-container">
            <h4 class="elementor-heading-name">FINAL ASSIGNMENT</h4>
            <h4 class="elementor-heading-title">@maos</h4>
        </div>
    </div>
</body>

<script>
    const navBtn = document.querySelector('.nav-btn')
    const close = document.querySelector('.close')
    const navWrapper = document.querySelector('.nav-wrapper')
    const menuList = document.querySelectorAll('.menu-list')
    const tl = gsap.timeline();

    navBtn.addEventListener('click', function () {
        navWrapper.style.visibility = 'visible'
        navWrapper.style.opacity = '1'
        navWrapper.style.zIndex = '100'
    })

    close.addEventListener('click', function () {
        navWrapper.style.visibility = 'hidden'
        navWrapper.style.opacity = '0'
        navWrapper.style.zIndex = '-1'
    })
    menuList.forEach(item => {
        item.addEventListener('click', function () {
            window.location.href = `/${item.getAttribute('link-value')}.html`
        })
    })

    gsap.to(".elementor-1-title", {
        duration: 2,
        ease: "power1.out",
        opacity: 1,
        y: 1
    });
    gsap.to(".elementor-1-img", {
        x: -360,
        duration: 2,
        ease: "power1.out",
        opacity: 1,
        rotation: -360
    });

    ScrollTrigger.create({
        trigger: ".elementor-5",
        start: "top bottom",
        endTrigger: ".elementor-5",
        end: "bottom 50%+=100px",
        onUpdate: (self) => {
            gsap.to(".elementor-5", {
                duration: 2,
                ease: "power1.out",
                opacity: 1
            });
        },
    });

    ScrollTrigger.create({
        trigger: ".elementor-6",
        start: "top 50%+=100px",
        endTrigger: ".elementor-6",
        end: "bottom 50%+=100px",
        onUpdate: (self) => {
            var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
            var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
            if (viewportWidth < 1200) {
                gsap.to(".img-1", {
                    x: 100,
                    duration: 1,
                    ease: "power1.out",
                    opacity: 1
                });
                gsap.to(".img-2", {
                    x: -100,
                    duration: 1,
                    ease: "power1.out",
                    opacity: 1
                });
                gsap.to(".img-3", {
                    x: 100,
                    duration: 1,
                    ease: "power1.out",
                    opacity: 1
                });
                gsap.to(".img-4", {
                    x: -100,
                    duration: 1,
                    ease: "power1.out",
                    opacity: 1
                });
            } else {
                gsap.to(".img-1", {
                    x: 150,
                    duration: 1,
                    ease: "power1.out",
                    opacity: 1
                });
                gsap.to(".img-2", {
                    x: -150,
                    duration: 1,
                    ease: "power1.out",
                    opacity: 1
                });
                gsap.to(".img-3", {
                    x: 450,
                    duration: 1,
                    ease: "power1.out",
                    opacity: 1
                });
                gsap.to(".img-4", {
                    x: -250,
                    duration: 1,
                    ease: "power1.out",
                    opacity: 1
                });
            }

        },
    });

    ScrollTrigger.create({
        trigger: ".elementor-10",
        start: "top bottom",
        endTrigger: ".elementor-10",
        end: "bottom 50%+=100px",
        onUpdate: (self) => {
            gsap.to(".elementor-10", {
                x: 0,
                duration: 2,
                ease: "power1.out",
                opacity: 1
            });
        },
    });
</script>

</html>